<template>
    <div class="week">
        <div class="week-title">
            ///////////<span class="week-title-top">周末出游</span>//////////
            <p class="week-title-down">致力推荐超完美套餐</p>
        </div>
        <div class="weekC">
            <van-swipe class="week-content" :loop="true" :width="150" >
                <van-swipe-item class="week-content-list" v-for="item of weekendList" :key="item.weekId"
                                @click="handleDetail(item.weekImgUrl, item.weekName,item.weekDesc, item.weekAddress,
                                item.weekMark, item.weekRank, item.weekData, item.weekRemark, item.weekLine, item.weekTitle)">
                    <div class="content-list">
                        <div class="content-list-img">
                            <img :src="item.weekImgUrl"/>
                        </div>
                        <div class="content-list-content">
                            <p class="content-list-content-one">{{item.weekName}}</p>
                            <p class="content-list-content-two">{{item.weekDesc}}</p>
                        </div>
                    </div>
                </van-swipe-item>
                <!--            轮播图小圆点消失-->
                <template #indicator>
                    <div class="custom-indicator"></div>
                </template>
            </van-swipe>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeWeekend",
        data(){
            return{
                weekendList: [],
                swiperOption:{
                    freeMode: true,
                    spaceBetween: 20,
                    slidesPerView: 3
                }
            }
        },
        mounted() {
            this.allData();
        },
        methods:{
            allData(){
                this.getRequest("/home/week/list/").then(resp => {
                    this.weekendList = resp.data;
                })
            },
            handleDetail(weekImgUrl, weekName, weekDesc, weekAddress, weekMark, weekRank, weekData, weekRemark, weekLine, weekTitle){
                let weekDetail = {
                    imgUrl: weekImgUrl,
                    name: weekName,
                    desc: weekDesc,
                    address: weekAddress,
                    mark: weekMark,
                    rank: weekRank,
                    data: weekData,
                    remark: weekRemark,
                    line: weekLine,
                    title: weekTitle,
                };
                this.$store.dispatch('weekD',weekDetail);
                this.$router.push("/scedetail");
            }
        }
    }
</script>

<style scoped>
img{
    height: 92px;
}
.custom-indicator{
    width: 0px;
    height: 0px;
}
.week{
    overflow: hidden;
    height: 0;
    padding-bottom: 56%;
    border-top: .2rem solid #eee;
}
.week-title{
    text-align: center;
    padding-top: .3rem;
}
.week-title-top{
    padding: 0px .3rem;
    font-size: 16px;
    font-weight: bold;
}
.week-title-down{
    padding-top: .2rem;
    color: #aaaaaa;
}
.week-content{
    padding-top: 0.2rem;
    margin-left: .1rem;
    margin-right: .1rem;
    text-align: center;
}

.content-list{
    border: 1px solid #e5e5e5;
    margin-left: .1rem;
    margin-right: .1rem;
}

.content-list-content p{
    padding-top: .2rem;
    line-height: .3rem;
}
.content-list-img img{
    max-width: 100%;
}
.content-list-content-one{
    font-size: 14px;
    font-weight: bold;
}
.content-list-content-two{
    padding-bottom: .1rem;
}
</style>